<template>
<n-message-provider>
<n-dialog-provider>
    <GlobalHelper></GlobalHelper>

    <ShellView v-show="false">
        <template #terminal-tool-icons>
            <n-button type="info" circle class="toolitem pointer" onclick="bus.emit('terminal.popdown()')" title="收起终端" style="margin-right:30px">
                <n-icon size="20"><svg viewBox="0 0 24 24" transform="rotate(270, 0, 0)"><path d="M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12l8.13-8.13z" fill="currentColor"></path></svg></n-icon>
            </n-button>
        </template>
    </ShellView>
    
    <Index ref="refIndex" v-show="activePage=='index'"></Index>
    <Firmware v-show="activePage=='firmware'" ref="refFirmware"></Firmware>
    <Factory v-show="activePage=='factory'" ref="refFactory"></Factory>

    <SpinFullpage class="full top-view"></SpinFullpage>
</n-dialog-provider>
</n-message-provider>
</template>

<style scoped>
.top-view {
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>


<script setup lang="ts">
import { ref, onMounted, Ref } from 'vue'
import Index from './components/Index.vue'
import ShellView from '@beshell/terminal/ShellView.vue'
import SpinFullpage from './components/SpinFullpage.vue'
import { bus } from '@beshell/events-ts/bus'
import GlobalHelper from './GlobalHelper.vue'
import Firmware from './components/downloader/Firmware.vue'
import Factory from './components/downloader/Factory.vue'

const activePage = ref("")
const refIndex = ref(null) as unknown as Ref<typeof Index>
const refFirmware = ref(null) as unknown as Ref<typeof Firmware>
const refFactory = ref(null) as unknown as Ref<typeof Factory>

const PerfectWidth = 1280

const views: any = {
    index: { view: refIndex, width: PerfectWidth } ,
    firmware: { view: refFirmware, width: PerfectWidth } ,
    factory: { view: refFactory, width: PerfectWidth } ,
}

function enter(viewName:string, argv:any[]=[]) {
    console.log(viewName)
    if(!views[viewName]) {
        throw new Error("unknow top view name:"+viewName)
    }

    if(activePage.value && views[activePage.value] && views[activePage.value].view.value.leave) {
        views[activePage.value]?.view.value.leave ()
    }

    bus.emit(activePage.value+".leave")
    
    activePage.value = viewName

    // if((window as any).nw && views[viewName].width) {
    //     (window as any).nw.Window.get().width = views[viewName].width || views.hall.width
    // }

    if(views[viewName].view.value.enter) {
        views[viewName].view.value.enter (... argv)
    }

    bus.emit(viewName+".enter")
}

onMounted(()=>{
    enter("index")

    // 记录用户 resize 窗口宽度
    if((window as any).nw) {
        (window as any).nw.Window.get().on("resize",(w:number,h:number)=>{
            // console.log(activePage.value, w,h)
            if(views[activePage.value]) {
                views[activePage.value].width = w
            }
        })
    }
})


bus.on("topview.enter()",(viewName:string, ... argv: any[])=>{
    enter(viewName, argv)
})

</script>